const SimpleTable = (props, { slots, emit, attrs }) => {
  const { columns, data, itemRender, dialogWidth } = props
  // 样式
  const spanNum = columns.reduce((acc, cur) => acc + (Number(cur.span) || 1), 0)
  const style = { 'grid-template-columns': `repeat(${spanNum}, minmax(0, 1fr)) !important` }
  const classes = (d, i) => `${!i ? 'border-l ' : ''}border-b border-r p-1 flex items-center dark:border-gray-700 col-span-${d.span || 1}`

  return <VMore show={data.length > props.line} width={dialogWidth} value={(line) => [<div class="grid border-t dark:border-gray-700 w-full" style={style}>
    {columns.map((d, i) => <div key={i} class={classes(d, i)}>{d.title}</div>)}
    {data.length ? data.slice(0, line > props.line ? 100 : props.line).reduce((acc, da, idx) => acc.concat(columns.map((d, i) => <div key={i} class={classes(d, i)}>
      {itemRender && typeof itemRender === 'function' ? itemRender(da, d.field, idx, line) : <VText value={da[d.field]} line={line} />}
      </div>)), []) : <div class="border-l border-b border-r p-1 text-center text-gray-500 dark:border-gray-700 col-span-full">暂无数据</div>}
  </div>]} />
}

SimpleTable.props = {
  columns: { type: Array, default: () => ([]) },
  data: { type: Array, default: () => ([]) },
  line: { type: Number, default: 100 },
  dialogWidth: { type: Number, default: null },
  itemRender: {type: Function, default: null}
}

export default SimpleTable